<script setup lang="ts">
import { onMounted, ref } from "vue";
import { 
  NConfigProvider, 
  NMessageProvider, 
  NDialogProvider, 
  NNotificationProvider,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NH1,
  NCard,
  NSpace,
  NButton,
  darkTheme,
  type GlobalTheme
} from "naive-ui";
import { useConfigStore } from "./stores/config";
import { useAuthStore } from "./stores/auth";
import AudioDeviceTest from "./components/AudioDeviceTest.vue";

const configStore = useConfigStore();
const authStore = useAuthStore();

const theme = ref<GlobalTheme | null>(null);
const loading = ref(true);

onMounted(async () => {
  // Disable context menu except for input elements
  document.body.addEventListener("contextmenu", (e) => {
    if ((e.target as HTMLElement)?.tagName !== "INPUT") e.preventDefault();
    return false;
  });

  try {
    // Load application configuration
    await configStore.loadConfig();
    
    // Set theme based on config
    if (configStore.config?.ui.theme === "dark") {
      theme.value = darkTheme;
    }
    
    // Load audio devices
    await configStore.loadAudioDevices();
    
    // Update registration status if logged in
    if (configStore.config?.sip) {
      await authStore.updateRegistrationStatus();
    }
  } catch (error) {
    console.error("Failed to initialize app:", error);
  } finally {
    loading.value = false;
  }
});

const toggleTheme = () => {
  theme.value = theme.value ? null : darkTheme;
  if (configStore.config) {
    configStore.updateUiConfig({
      ...configStore.config.ui,
      theme: theme.value ? "dark" : "light"
    });
    configStore.saveConfig(configStore.config);
  }
};
</script>

<template>
  <NConfigProvider :theme="theme">
    <NMessageProvider>
      <NDialogProvider>
        <NNotificationProvider>
          <NLayout style="height: 100vh">
            <NLayoutHeader style="height: 64px; padding: 16px" bordered>
              <div style="display: flex; justify-content: space-between; align-items: center">
                <NH1 style="margin: 0">Tauri SIP Client</NH1>
                <NSpace>
                  <NButton @click="toggleTheme">
                    {{ theme ? "Light" : "Dark" }} Theme
                  </NButton>
                </NSpace>
              </div>
            </NLayoutHeader>
            
            <NLayoutContent style="padding: 24px">
              <div v-if="loading" style="text-align: center; padding: 50px">
                Loading...
              </div>
              
              <div v-else>
                <NCard title="SIP Client Status">
                  <NSpace vertical>
                    <div>
                      <strong>Registration Status:</strong> 
                      {{ authStore.registrationStatus }}
                    </div>
                    
                    <div v-if="authStore.config">
                      <strong>Server:</strong> 
                      {{ authStore.config.server }}:{{ authStore.config.port }}
                    </div>
                    
                    <div v-if="configStore.audioDevices">
                      <strong>Audio Devices:</strong>
                      <div style="margin-left: 16px">
                        <div>Input: {{ configStore.audioDevices.input_devices.length }} devices</div>
                        <div>Output: {{ configStore.audioDevices.output_devices.length }} devices</div>
                      </div>
                    </div>
                    
                    <NSpace>
                      <NButton 
                        v-if="!authStore.isLoggedIn" 
                        type="primary"
                        @click="() => {}"
                      >
                        Configure SIP Account
                      </NButton>
                      
                      <NButton 
                        v-if="authStore.isLoggedIn" 
                        @click="authStore.logout"
                        :loading="authStore.loading"
                      >
                        Logout
                      </NButton>
                    </NSpace>
                  </NSpace>
                </NCard>
                
                <!-- Audio Device Test Component -->
                <div style="margin-top: 24px">
                  <AudioDeviceTest />
                </div>
              </div>
            </NLayoutContent>
          </NLayout>
        </NNotificationProvider>
      </NDialogProvider>
    </NMessageProvider>
  </NConfigProvider>
</template>

<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100vh;
}
</style>